<template>
	<div>
		<HeaderTab>
			<h4 class="headerline" slot="center">分类</h4>
		</HeaderTab>
		<div class="tag_box">
			<ul>
				<li @click="clickStyle()" class="tag_item active">全部</li>
				<li @click="clickStyle()" class="tag_item" v-for="(value, index) in tag_arr" :key="index" :name="value.tagId">
					<router-link :to="'/classification/'+value.id">{{value.tag_name}}</router-link>
				</li>
			</ul>
		</div>
		<div class="classification_content_box">
			<bookItem v-for="(item, index) in item_data" :key="index" :book_items="item"></bookItem>
		</div>
		<proTabBar></proTabBar>
	</div>
</template>

<script>
	import $ from 'jquery'
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue';
	import bookItem from 'views/DetailsPage/bookItem'
	import proTabBar from 'components/common/proTabBar.vue';

	export default {
		name: 'Classification',
		data() {
			return {
				book_items: [],
				tag_arr: [],
				item_data: [],
			}
		},
		components: {
			HeaderTab,
			proTabBar,
			bookItem
		},
		methods: {
			clickStyle() {
				let menu = document.getElementsByClassName('tag_box')[0];
				let divs = menu.getElementsByTagName('li');
				for (let i = 0; i < divs.length; i++) {
					divs[i].onclick = function() {
						for (let j = 0; j < divs.length; j++) {
							divs[j].className = 'tag_bo';
						}
						this.className = 'active';
					}
				}
			},

			loadData() {
				// 获取所有标签
				this.axios.get('http://192.168.43.169/api/booktag').then((response) => {
					let resdata = response.data;
					let resArrdata = response.data.data;
					if (resdata.code == 200) {
							this.tag_arr = resArrdata;
					}
				});

				// 获取该标签下的所有书本
				let tid = this.$route.params.tagid;
				this.axios.get('http://192.168.43.169/api/book/' + (tid ? tid:0)).then((response) => {
					this.item_data = response.data.data
					console.log(response.data.data)
				});
			}
		},
		mounted() {
			this.loadData();
		},
		watch: {
			// 监听,当路由地址发生改变时,再重新执行一次loadData()函数
			'$route'(to,from){
				this.loadData();
			}
		}
	}
</script>

<style>
	.headerline {
		width: 50px;
		color: aliceblue;
		margin: 0 auto;
		line-height: 40px;
		display: block;
	}

	.tag_box {
		width: 30%;
		height: 100%;
		margin-top: 49px;
		position: fixed;
		float: left;
		background: rgb(245, 245, 246);
		border-radius: 5px;
	}

	.tag_box ul {
		padding-left: 0px;
	}

	.tag_box li {
		list-style: none;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-bottom: #999999 1px solid;
	}

	.active {
		outline: rgb(0, 164, 180) 1px solid;
		border-left: rgb(0, 164, 180) 4px solid;
		color: lightseagreen;
		border-bottom: none !important;
		background: #C4E3F3;
	}

	.tag_bo {
		color: #262626;
	}

	.classification_content_box {
		width: 67%;
		float: right;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 31px 10px;
		margin-top: 30px;
		margin-left: 114px;
		position: relative;
		margin-bottom: 0px;
	}
</style>
